<template>
	<view class="container-box">
	  <view class="container-box-head">
				<view class="container-box-head-title">HI,{{ dataInfo.group_name }}</view>
				<view class="container-box-head-img">
			      <image src="@/static/comPerson.png" mode="aspectFill" v-if="dataInfo.group_id === 6"></image>
				   <image src="@/static/area.png" mode="aspectFill" v-if="dataInfo.group_id === 5"></image>
				   <image src="@/static/xiaos.png" mode="aspectFill" v-if="dataInfo.group_id === 4"></image>
				</view>
			</view>
			<view class="container-box-item">
			  <view class="container-box-item-grid">
				<view class="container-box-item-grid-left">
				  <text>团队</text>
				  <text>{{ dataInfo.manager_info.length || 0 }}人</text>
				</view>
				<view class="container-box-item-grid-line"></view>
				<view class="container-box-item-grid-right">
					<text>门店</text> 
					<text>{{ dataInfo.device_total || 0}}家</text>
				</view>
			  </view>
			</view>
	</view>
</template>

<script>
 export default {
   props: {
	 dataInfo: {
	   type: Object,
	   default: {}
	 }
   },
   data(){
     return {
	 
	 }
   },
   methods: {}
 }
</script>

<style lang="scss" scoped>
	.container{
	 &-box {
	   height: 154rpx;
	   background: $uni-bg-color;
	   border-radius: 0 0 50rpx 50rpx;
	   margin-bottom: 50rpx;
	   &-head {
		@include layout(stretch,center);
		padding: 24rpx;
	    &-title {
		 font-weight: 500;
		 font-size: 28rpx;
		 color: #3D3D3D;
		 margin-left: 44rpx;
		}
		&-img {
		  width: 162rpx;
		  height: 34rpx;
		  image {
			margin-left: 20rpx;
		    width: 100%;
			height: 100%;
		  }
		}
	   }
	   &-item {
		width: 670rpx;
		height: 80rpx;
		background: linear-gradient( 270deg, #FF8732 0%, #FFB65E 100%);
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		&-grid {
		  display: flex;
		  justify-content: space-around;
		  color: #FFFFFF;
		  line-height: 80rpx;
		  position: relative;
		  &-line {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		    width: 2rpx;
		    height: 32rpx;
			background: #fff;
		  }
		  &-left {
		    text {
			  &:nth-child(1){
				font-size: 24rpx;
			  }
			  &:nth-child(2){
				font-weight: 700;
				font-size: 36rpx;
				margin-left: 10rpx;
			  }
			}
		  }
		  &-right {
			text {
			  &:nth-child(1){
				font-size: 24rpx;
			  }
			  &:nth-child(2){
				font-weight: 700;
				font-size: 36rpx;
				margin-left: 10rpx;
			  }
			}
		  }
		}
	   }
	 }
	}
</style>